<script setup lang="ts">
import { ref } from 'vue';

//



let areatag = ref('');

function areaTagtoggleActive(tag: string) {

    console.log(tag);

    areatag.value = tag;

}


// 跳转至视频播放页
function goDetail() {

    uni.navigateTo({
        url: '/pages/PdVideo/PdVideo'
    });
}


</script>

<template>

    <view class="tags-line">
        <view class="tags-title">
            <text style="width: 150rpx; display: block; color: #666;">全部地区 : </text>

        </view>

        <scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
            <view class="tag" :class="{ 'tag-active': areatag === 'A' }" @tap="areaTagtoggleActive('A')">A</view>
            <view class="tag" :class="{ 'tag-active': areatag === 'B' }" @tap="areaTagtoggleActive('B')">B</view>
            <view class="tag" :class="{ 'tag-active': areatag === 'C' }" @tap="areaTagtoggleActive('C')">C</view>
            <view class="tag" :class="{ 'tag-active': areatag === 'D' }" @tap="areaTagtoggleActive('D')">D</view>
            <view class="tag" :class="{ 'tag-active': areatag === 'E' }" @tap="areaTagtoggleActive('E')">E</view>

        </scroll-view>

    </view>



    <view class="tags-line">
        <view class="tags-title">
            <text style="width: 150rpx; display: block; color: #666;">全部分类 : </text>

        </view>

        <scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
            <view class="tag tag-active">A</view>
            <view class="tag">B</view>
            <view class="tag">A</view>
            <view class="tag">A</view>
            <view class="tag">A</view>
            <view class="tag">A</view>
            <view class="tag">A</view>
        </scroll-view>

    </view>



    <view class="tags-line">
        <view class="tags-title">
            <text style="width: 150rpx; display: block; color: #666;">全部年份 : </text>

        </view>

        <scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
            <view class="tag tag-active">A</view>
            <view class="tag">A</view>
            <view class="tag">A</view>
            <view class="tag">A</view>
            <view class="tag">A</view>
            <view class="tag">A</view>
            <view class="tag">A</view>
        </scroll-view>

    </view>


    <!-- 搜索出来的电影展示 -->



    <view class="movieList" v-for="item in 20" @tap="goDetail">
        <view class="imgList">
            <image src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2578474613.webp"
                mode="scaleToFill" />
            <text class="markstar">9.7分</text>
        </view>
        <text class="movieName">死亡的四万</text>
    </view>


</template>

<style lang="scss">
.tags-line {
    margin-top: 30rpx;
    margin-bottom: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;


}

.scroll-view_H {
    white-space: nowrap;
    width: 100%;


    .tag {

        display: inline-block;
        width: 100rpx;
        height: 50rpx;
        line-height: 50rpx;
        text-align: center;
        font-size: 26rpx;
        border-radius: 18rpx;
        margin: 20rpx;
    }

    .tag-active {
        background-color: red;
        color: white;
    }
}


.movieList {

    margin: 10px;
    border: 1px red solid;
    display: inline-block;
    width: 200rpx;
    text-align: center;
    height: 380rpx;
    font-size: 36rpx;
    // background-color: red;
    vertical-align: top;

    .imgList {
        position: relative;



    }

    .movieName {
        font-size: 12px;
        white-space: nowrap;
        text-overflow: ellipsis;

    }

    .markstar {
        position: absolute;
        bottom: 10rpx;
        left: 21rpx;
        color: orangered;
        font-size: 27rpx;
    }

    image {
        height: 300rpx;
        width: 200rpx;
    }





}
</style>
